<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>AroundGlobe</title>
 <link rel="stylesheet" href="./css/main.css"/>
 <link rel="stylesheet" href="fontawesome-free-5.11.2-web/css/all.min.css"/>
 <link rel="shortcut icon" href="./setup-files/images/favicon.ico" type="image/x-icon"/>

</head>
<body>
 <header id="home">
  <nav class="navbar">
    <div class="nav-center">
      <div class="nav-header">
        <button type="button" class="nav-toggle" id="nav-toggle" aria-label="nav toggler"> 
          <i class="fas fa-bars"></i>
        </button>
        
      
            <div class="nav-links ">
              <h2 class="title1">Around<span class="subtitle1">Globe </span></h2>
                   
                   
              
              
                <a href="#home" class="nav-link">home</a>
                <a href="#about" class="nav-link">about</a>
                <a href="#services" class="nav-link">services</a>
                <a href="#featured" class="nav-link">featured</a>
                <a href="#gallery" class="nav-link">gallery</a>
                <a href="login.html" class="nav-link">login</a>
                
              </div>
        
      

    </div>
    


  </nav>
   <div class="hero">
    <div class="hero-banner">
     <h1 class="hero-title">continue exploring</h1>
     <p class="hero-text">Stop dreaming about your bucketlist and start living it.</p>
     <a href="#featured" class="btn-white">explore tours</a>
    </div>
   </div>
  
 </header>
 <!--about section-->
<section class="section about"id="about">
 <div class="title-wrapper">
  <h2 class="title">about<span class="subtitle"> us</span></h2>
 </div>
 <div class="about-center section-center">
  <article class="about-img">
   <img src="./setup-files/images/about.jpeg" class="about-photo"/>
  </article>
  <article class="about-info">
   <h3>explore the difference</h3>
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem quas, officiis explicabo sed corrupti quo autem possimus voluptates odio ab.

   </p>
   <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Debitis, architecto eum perspiciatis ab magnam perferendis laudantium commodi dicta quos non?</p>
   <a href="about.html" class="btn-primary">read more</a>
   
  </article>
 </div>
  

</section>
<section class="section services" id="services">
 <div class="title-wrapper">
  <h2 class="title">our <span class="subtitle">services</span></h2>
 </div>
 <div class="section-center services-center">
  <article class="service">
   <span class="service-icon"><i class="fas fa-wallet fa-fw"></i></span><div class="service-info">
   <h4 class="service-title">saving money</h4>
   <p class="service-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti, similique?</p></div>
  </article>
  <article class="service">
   <span class="service-icon"><i class="fas fa-tree fa-fw"></i></span><div class="service-info">
   <h4 class="service-title">endless adventure</h4>
   <p class="service-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti, similique?</p></div>
  </article>
  <article class="service">
   <span class="service-icon"><i class="fas fa-socks fa-fw"></i></span><div class="service-info">
   <h4 class="service-title">awesome comfort</h4>
   <p class="service-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti, similique?</p></div>
  </article>
 </div>
</section>
<section class="section featured" id="featured">
  <div class="title-wrapper">
    <h2 class="title">featured <span class="subtitle"> tours</span></h2>
   </div>
   <div class="section-center featured-center">
    <article class="tour-card">
     <div class="tour-img-containers">

      <img src="./setup-files/images/tour-1.jpeg" class="tour-img"/>
      <p class="tour-date">October 19,2019</p>
     </div>
     <div class="tour-footer">
      <h4 class="tour-title">tibet adventure</h4>
      <div class="tour-info">
       <p class="tour-country"><span><i class="fas fa-map"></i></span> china</p>
       <div class="tour-details">
        <p>6 days
        </p>
        <p>from $2100</p>
       </div>
      </div>
     </div>
    </article>
    <article class="tour-card">
      <div class="tour-img-containers">
 
       <img src="./setup-files/images/tour-2.jpeg" class="tour-img"/>
       <p class="tour-date">November 18,2019</p>
      </div>
      <div class="tour-footer">
       <h4 class="tour-title">fly to hawaii</h4>
       <div class="tour-info">
        <p class="tour-country"><span><i class="fas fa-map"></i></span> U.S.</p>
        <div class="tour-details">
         <p>5 days
         </p>
         <p>from $6100</p>
        </div>
       </div>
      </div>
     </article>
     <article class="tour-card">
       <div class="tour-img-containers">
  
        <img src="./setup-files/images/tour-3.jpeg" class="tour-img"/>
        <p class="tour-date">December 2,2019</p>
       </div>
       <div class="tour-footer">
        <h4 class="tour-title">explore hongkong</h4>
        <div class="tour-info">
         <p class="tour-country"><span><i class="fas fa-map"></i></span> china</p>
         <div class="tour-details">
          <p>4 days
          </p>
          <p>from $3100</p>
         </div>
        </div>
       </div>
      </article>
      <article class="tour-card">
        <div class="tour-img-containers">
   
         <img src="./setup-files/images/tour-4.jpeg" class="tour-img"/>
         <p class="tour-date"> January 19,2019</p>
        </div>
        <div class="tour-footer">
         <h4 class="tour-title">detour africa</h4>
         <div class="tour-info">
          <p class="tour-country"><span><i class="fas fa-map"></i></span> africa</p>
          <div class="tour-details">
           <p>6 days
           </p>
           <p>from $8100</p>
          </div>
         </div>
        </div>
       </article>
   </div>

<div class="tour-link">
 <a href="featured.html" class="btn-primary">all tours</a>
</div>
</section>
<section class="section gallery " id="gallery">
    <div class="title-wrapper">
        <h2 class="title">our  <span class="subtitle">gallery</span></h2>
       </div>
       <div class="gallery-center">
       <div class="gallery-img-container">
         <img src="./setup-files/images/around1.jpg" class="gallery-img"/>
       </div>
       <div class="gallery-img-container">
          <img src="./setup-files/images/tour-11.jpg" class="gallery-img"/>
        </div>
        <div class="gallery-img-container">
            <img src="./setup-files/images/tour-10.jpg" class="gallery-img"/>
        </div>
          <div class="gallery-img-container">
              <img src="./setup-files/images/tour-8.jpg" class="gallery-img"/>
          </div>
            <div class="gallery-img-container">
                <img src="./setup-files/images/around2.jpg" class="gallery-img"/>
              </div>
              <div class="gallery-img-container">
                  <img src="./setup-files/images/around3.jpg" class="gallery-img"/>
                </div>
                <div class="gallery-img-container">
                    <img src="./setup-files/images/around5.jpg" class="gallery-img"/>
                  </div>
                  </div></section>
                  <section class="section deals" id="deals">
                  <div class="title-wrapper">
                      <h2 class="title">hot  <span class="subtitle">deals</span></h2>
                     </div>
                     <form>
                       <div class="input-group">
                         <input type="email" class="form-control" placeholder="your email"/>
                         <button type="submit" class="btn-submit">submit</button>
                       </div>
                     </form>


  </section>
<footer class="section footer">
  <div class="footer-links">
    <a href="#home" class="footer-link">home</a>
    <a href="about.html" class="footer-link">about</a>
    <a href="#services" class="footer-link">services</a>
    <a href="#featured" class="footer-link">featured</a>
    <a href="#gallery" class="footer-link">gallery</a>
  </div>
  <div class="footer-icons">
    <a href="www.facebook.com" target="blank" class="footer-icon"><i class="fab fa-facebook"></i></a>
    <a href="www.twitter.com" target="blank" class="footer-icon"><i class="fab fa-twitter"></i></a>
    <a href="www.instagram.com" target="blank" class="footer-icon"><i class="fab fa-instagram"></i></a>
  </div>
  <p class="copyright">
    copyright &copy; <span class="span"> AroundGlobe</span> travel tours company . all rights reserved.
  
  </p>


</footer>
<script src="app.js"></script>
</body>
</html>